<script setup>
import { ref, computed, onMounted } from 'vue'

const stats = ref([
  { label: '新用户', value: 1280, delta: '+12%' },
  { label: '活跃用户', value: 5420, delta: '+3.2%' },
  { label: '转化率', value: '4.6%', delta: '+0.4%' },
  { label: '营收', value: '¥ 38,920', delta: '+6.1%' },
])

const chartBars = computed(()=> Array.from({length: 16}, (_,i)=> 20 + Math.round(Math.abs(Math.sin(i))*60)))

onMounted(()=>{
  // 仅前端占位动画
})
</script>

<template>
  <div class="dashboard">
    <div class="cards">
      <div v-for="s in stats" :key="s.label" class="card">
        <div class="label">{{ s.label }}</div>
        <div class="value">{{ s.value }}</div>
        <div class="delta up">{{ s.delta }}</div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-header">趋势</div>
      <div class="bars">
        <div v-for="(h,i) in chartBars" :key="i" class="bar" :style="{ height: h+'px' }"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard { display: grid; gap: 16px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px;
  display: grid; align-content: center; gap: 6px;
}
.card .label { color: #64748b; font-size: 13px; }
.card .value { font-size: 24px; font-weight: 700; }
.card .delta { font-size: 12px; color: #16a34a; }

.panel { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; }
.panel-header { font-weight: 600; margin-bottom: 12px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.bar { width: 20px; background: linear-gradient(180deg, #60a5fa, #3b82f6); border-radius: 6px; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}
</style>
